<template>
  <div>
    <!-- 轮播图部分 -->
    <el-carousel height="150px">
      <el-carousel-item v-for="(item, index) in pics" :key="index">
        <!-- 使用require动态加载图片 -->
        <img :src="require(`@/assets/pics/${item}`)" alt="轮播图" style="width:100%;height:100%;object-fit:cover;">
      </el-carousel-item>
    </el-carousel>
 
    <!-- 分隔线示例部分 -->
    <div style="margin-top:20px;">
      <span>头上一片晴天，心中一个想念</span>
      <el-divider content-position="left">少年包青天</el-divider>
      <span>饿了别叫妈, 叫饿了么</span>
      <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
      <span>为了无法计算的价值</span>
      <el-divider content-position="right">阿里云</el-divider>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 修正1：data必须return对象
      // 修正2：只需要文件名，不需要完整路径
      pics: [
        'cai01.png', 
        'cai02.png', 
        'cai03.png', 
        'cai04.png' 
      ]
    }
  }
}
</script>
 
<style>
/* 可以添加自定义样式 */
.el-carousel__item img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
}
</style>